/* BOTON WHATSAPP ANIMADO */
body {
    background-color: rgba(175, 204, 172);
}

.container-boton {
    background-color: #25D366;
    border: 1px solid #fff;
    position: fixed;
    z-index: 999;
    border-radius: 15%;
    bottom: 25px;
    left: 25px;
    padding: 10px;
    transition: ease 0.3s;
    animation: efecto 1.2s infinite;
}

.container-boton:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.boton {
    width: 30px;
    transition: ease 1s;
}

/* Estilos para el tooltip */
.tooltip {
    visibility: hidden; /* Oculto por defecto */
    width: 200px; /* Ancho del tooltip */
    background-color: #25D366; /* Color de fondo */
    color: dimgray; /* Color del texto */
    text-align: center; /* Centrar el texto */
    border-radius: 5px; /* Bordes redondeados */
    padding: 5px; /* Espaciado interno */
    position: absolute; /* Posiciona el tooltip respecto al contenedor */
    z-index: 1; /* Asegura que el tooltip esté por encima de otros elementos */
    bottom: 100%; /* Posición del tooltip respecto al ícono */
    left: 110%; /* Posición hacia la derecha del ícono */
    margin-left: 0; /* Sin margen adicional */
    opacity: 0; /* Hacerlo invisible al principio */
    transition: opacity 0.3s, left 0.3s; /* Transición para suavizar la aparición */
	animation: efecto 1.2s infinite;
}

.container-boton:hover .tooltip {
    visibility: visible; /* Muestra el tooltip al pasar el cursor */
    opacity: 1; /* Hacerlo visible */
    left: 120%; /* Mueve el tooltip más hacia la derecha al hacer hover */
}

@keyframes efecto {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
}